<template>
  <div class="sidebar">
    <div class="sidebar-box" :style="{top:style}" ref="sidebarBox">
      <slot name="a"></slot>
      <slot name="b"></slot>
      <slot name="c"></slot>
      <slot name="p"></slot>
      <slot name="ad"></slot>
    </div>
  </div>
</template>

<script>
import scroll from '@/util/scroll'
import { mapState } from 'vuex'
export default {
  data () {
    return {

      sidebarHeight: null, // 侧边栏的内容高度
      clientHeight: 0 // 获取当前可视范围的高度
    }
  },

  mounted () {

  },
  updated () {
    this.$nextTick(() => {
      this.sidebarHeight = this.$refs.sidebarBox.offsetHeight // 获取侧边栏的内容高度
    })
    this.clientHeight = scroll.getClientHeight() // 获取当前可视范围的高度
  },

  computed: {
    ...mapState(['articleSider']),
    style () {
      // 动态添加的样式
      let top = null
      if (this.clientHeight >= this.sidebarHeight) {
        top = (this.sidebarHeight - this.clientHeight) + 'px' // 计算偏移的高度值
      } else {
        top = (this.clientHeight - this.sidebarHeight) + 'px'
      }
      return top
    }
  }

}
</script>

<style lang="scss" scoped>
// 引入基础配置
@use "@/styles/init" as h;
.sidebar{
  width:  25%;
  min-height: 705px;
  height: auto;
  margin-left: 10px;

  padding-bottom: 30px;
  .sidebar-box{
    position: sticky;
  }

}
</style>
